<template>
    <div>
        <h1 style="margin-left: 35%;margin-top: 10%" v-if="orderList.length===0">还没有订单哦(,,•́ . •̀,,)</h1>
        <el-card class="listCard" v-for="(item,o) in orderList" :key="o" shadow="hover" style="margin-top: 3px"
                 onmouseover="this.style.backgroundColor='#ffe8c0';this.style.color='#ff7a88'"
                 onmouseout="this.style.backgroundColor='';this.style.color=''">
            <div style="float: left;margin-left: 3%">
                <el-image
                        style="width: 100px; height: 100px"
                        :src="imgURL+item.pic1"
                        :fit="fit"></el-image>
            </div>
            <el-form :inline="true" :model="orderForm" ref="orderForm" style="margin-top: 3%">
                <el-form-item prop="title" style="margin-left:10%;width: 25%">
                    <h3 v-model="orderForm.title">{{item.storeName}}</h3>
                </el-form-item>
                <el-form-item prop="num" style="width: 15%">
                    <h3 v-model="orderForm.num">{{item.buyQuantity+'件'}}</h3>
                </el-form-item>
                <el-form-item prop="price" style="width: 15%">
                    <h3 v-model="orderForm.price">{{'总价：'+item.totalPrice}}￥</h3>
                </el-form-item>
                <el-form-item prop="logistic" v-if="list==1||list==4">
                    <h3 v-model="orderForm.logistic">{{'物流编号：'+item.logistic}}</h3>
                </el-form-item>
                <el-form-item v-if="list==3||list==6||list==4">
                    <div style="float: right">
                        <el-button type="text" @click="detailPro(item.orderNo)">查看详情</el-button>
                    </div>
                </el-form-item>
                <el-form-item v-if="list==4">
                    <div style="float: right">
                        <el-button type="text" @click="logPro()">确认收货</el-button>
                    </div>
                </el-form-item>
                <el-form-item v-if="list==3">
                    <div style="float: right">
                        <el-button type="text" @click="sendPro()">发货</el-button>
                    </div>
                </el-form-item>
                <el-form-item v-if="list==5">
                    <div style="float: right">
                        <el-button type="text" @click="evaluate(item.orderNo)">评价</el-button>
                    </div>
                </el-form-item>
                <el-form-item v-if="list==2">
                    <div style="float: right">
                        <el-button type="text" @click="scanEva(item.orderNo)">查看评价</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>

        <!--订单详情抽屉-->
        <el-drawer
                title="订单详情"
                :visible.sync="detailDrawer"
                size="50%">
            <div style="overflow-y:auto;height: 95%">
                <el-card v-for="(item,i) in proDetail" :key="i" shadow="hover" style="margin-top: 2%" >
                    <div @click="getDetail(item)">
                    <el-form :inline="true" style="margin-top: 2%">
                        <el-image
                                style="width: 150px"
                        :src="imgURL+item.pic1"
                        >
                        </el-image>
                        <el-form-item prop="title" style="margin-left:10%;width: 30%">
                            <h3>{{item.productName}}</h3>
                        </el-form-item>
                        <el-form-item prop="num" style="width: 7%">
                            <h3>{{item.buyQuantity+'件'}}</h3>
                        </el-form-item>
                    </el-form>
                    </div>
                </el-card>
            </div>
        </el-drawer>

        <!--发货弹框-->
        <el-dialog  title="发货" :visible.sync="dialogSendVisible" center :append-to-body='true'>
            <el-form :model="sendForm" :rules="sendRule" ref="sendForm">
                <el-form-item prop="log" style="margin-top: 20px;margin-bottom: 0px">
                    <el-input v-model="sendForm.log" placeholder="请输入物流编号"></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 20px">
                    <el-button type="primary" @click="sendPublish('sendForm')" class="publishBtn"
                               onmouseover="this.style.backgroundColor='transparent';this.style.color='#494949'"
                               onmouseout="this.style.backgroundColor='#ff7a88';this.style.color='#fff'"
                               round >发货</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--评价抽屉-->
        <el-drawer
                title="评价"
                :visible.sync="EvaDrawer"
                size="40%">
            <div style="overflow-y:auto;height: 95%">
                <el-card  shadow="hover" style="margin-top: 2%;padding: 0 0 0 30px">
                    <el-form :model="EvaForm" ref="EvaForm" :inline="true" style="margin-top: 2%">

                        <br>
                        <el-form-item prop="text">
                            <el-input type="text" placeholder="淘到的东西还满意吗?给个评价吧！" v-model="evaForm.text"></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item prop="star">
                            <el-rate v-model="evaForm.star" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
                        </el-form-item>
                        <el-form-item prop="star">
                            <el-button @click="evaPublish('evaForm')" class="carBtn"
                                       onmouseover="this.style.backgroundColor='transparent';this.style.color='#494949'"
                                       onmouseout="this.style.backgroundColor='#ff7a88';this.style.color='#fff'"
                                       round >提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>
        </el-drawer>

        <!--查看评价抽屉-->
        <el-drawer
                title="订单评价"
                :visible.sync="ScanDrawer"
                size="50%">
            <div style="overflow-y:auto;height: 95%">
                <el-card v-for="(item,i) in proDetail" :key="i" shadow="hover" style="padding: 0 0 0 20px">
                    <el-form :inline="true" style="margin-top: 2%">
                        <el-form-item prop="title" style="margin-left:2%;width: 50%">
                            <h3>评价时间{{item.times}}</h3>
                        </el-form-item>
                        <br>
                        <el-form-item prop="text">
                            <el-input type="text" v-model="item.content" disabled></el-input>
                        </el-form-item>
                        <br>
                        <el-form-item prop="star">
                            <el-rate v-model="item.productQuality" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" disabled></el-rate>
                        </el-form-item>
                    </el-form>
                </el-card>
                <h3 v-if="proDetail.length==0"
                style="margin: 100px">
                    用户还未对该订单进行评价哦(๑•ᴗ•๑)♡
                </h3>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import {isvalidNull} from "../util";
    import API_PRO from "../../api/API_PRO";
    import Cookie from "js-cookie";
    import POST from "../../api/POST"

    export default {
        props:['list','orderList'],
        name: "orderList",
        data() {
            var validateStar = (rule, value, callback) => {
                if (isvalidNull(value)) {
                    callback(new Error('等级不能为空'))
                } else {
                    callback()
                }
            }
            var validateLog = (rule, value, callback) => {
                if (isvalidNull(value)) {
                    callback(new Error('物流编号不能为空'))
                } else {
                    callback()
                }
            }
            return {
                sendorder:'',
                pjorder:'',
                imgURL:API_PRO.imageURL,
                fit:'cover',
                dialogImageUrl: '',
                EvaDrawer:false,
                dialogSendVisible:false,
                ScanDrawer:false,
                detailDrawer: false,
                proDetail:[],
                orderForm:{
                    cusName: '',
                    stoName: '',
                    num: '',
                    logistic:''
                },
                evaForm:{
                    text:'',
                    star:null
                },
                evaRule: {
                    star: [
                        {required: true, trigger: 'blur', validator: validateStar}
                    ]
                },
                sendForm:{
                    log:''
                },
                sendRule: {
                    log: [
                        {required: true, trigger: 'blur', validator: validateLog}
                    ]
                },
                eva:{
                    pic1:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                    content:'234567890'
                }
            }
        },
        methods:{
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            //发货开始
            sendPro(){
                this.dialogSendVisible=true
            },
            sendPublish(){
                let log =this.sendForm.log
                let data= {
                    token:Cookie.get('token'),
                    orderno:this.sendorder

                }

                this.dialogSendVisible=false
            },
            detailPro(orderno){
                this.detailDrawer= true;
                let data ={
                    orderno:orderno,
                    token:Cookie.get('token')
                };
                POST.detailOrder(data).then(res=>{
                    this.proDetail = res;
                })
            },
            logPro(){

            },
            //发货结束
            //评价开始
            evaluate(val1){
               this.EvaDrawer=true;
                this.pjorder = val1;

            },
            evaPublish(val){
                let data = {
                    token:Cookie.get('token'),
                    orderno:this.pjorder,
                    service:this.evaForm.star,
                    productquality:this.evaForm.star,
                    content: this.evaForm.text
                }
                POST.evalution(data).then(res=>{
                    if(res.code == 200){}
                    this.$message({
                        message:res.message,
                        type:'success'
                    })
                    this.EvaDrawer=false;
                })

            },
            //评价结束
            //浏览评价开始
            scanEva(orderno){
                let data = {
                    token: Cookie.get('token'),
                    orderno:orderno,
                };
                POST.evaOrder(data).then(res=>{
                    this.proDetail = res;
                })
                this.ScanDrawer=true;
            },
            getDetail(item){
                this.$router.push({path: `/customer/store/`+ item.salerAccount + `/`+item.productNo})
            }
        }
    }
</script>

<style scoped>
    .listCard {
        width: 90%;
        margin-left: 5%;
    }

    .publishBtn{
        width: 100%;
        border-radius: 20px;
        margin-bottom: 0px;
        background-color: #ff7a88;
        border:solid 2px #ff7a88;
    }
    .carBtn {
        width: 100px;
        border-radius: 20px;
        margin-bottom: 0px;
        background-color: #ff7a88;
        color: #ffffff;
        border:solid 2px #ff7a88;
    }

</style>
